<div id="tron-content-wallet" [ngClass]="wallet.color">
    <div id="wallet-coin-list" class="wallet-menu" [fxFlex]="18">
        <mat-list>
            <ng-container *ngFor="let item of wallets | async | orderBy : ['-balance']">
                <mat-list-item (click)="openWalletDetails(item)"
                               [ngClass]="{'active': activeAccount == item.address}">
                    <div matLine class="proper-name">{{item.name}}</div>
                    <div matLine class="unit">
                        <span *ngIf="item.balanceHidden">[{{'Wallet.Index.HideBalance' | translate}}]</span>
                        <span *ngIf="!item.balanceHidden">{{item.balance | sunToUnit}} TRX</span>
                    </div>
                    <div class="market-wallet"></div>
                </mat-list-item>

            </ng-container>
        </mat-list>
        <div class="add-wallet">
            <button [disableRipple]="true" routerLink="/wallet/add-wallet" mat-button="">
                <span>{{'Wallet.Index.AddWallet' | translate}}</span>
            </button>
        </div>
    </div>

    <div id="tron-content-right" [ngClass]="wallet.color">

        <!-- If there are no wallets available -->
        <ng-container *ngIf="isEmptyWallet">
            <div class="empty-wallet" fxLayout="column" fxLayoutAlign="center center">
                {{'Wallet.Index.EmptyWallet' | translate}}

                <button class="tron-default-button" routerLink="/wallet/add-wallet" mat-stroked-button>
                    <span>{{'Wallet.Index.AddWallet' | translate}}</span>
                </button>
            </div>
        </ng-container>

        <!-- If no wallet is selected from the list -->
        <ng-container *ngIf="!isEmptyWallet && !activeAccount">
            <div class="empty-wallet" fxLayout="row" fxLayoutAlign="center center">
                {{'Wallet.Index.SelectWallet' | translate}}
            </div>
        </ng-container>

        <ng-container *ngIf="!isEmptyWallet && activeAccount">
            <wallet-settings [wallet]="wallet"></wallet-settings>

            <div id="wallet-detail-header" [ngClass]="{'has-scrolling': miniHeader}">
                <div id="asset-logo-status" (click)="updateWallet()">
                    <div id="asset-logo-container" [class.on]="enabledOn" (mouseout)="enabledOn=false" (mouseover)="enabledOn=true">
                        <div id="update-tx">
                            <mat-icon svgIcon="c-refresh"></mat-icon>
                        </div>
                        <div id="logo" class="tron-icon"></div>
                    </div>
                </div>

                <div id="header-balance" longPress (onRelease)="toggleBalance()">
                    <div class="balance-trx" *ngIf="!wallet.balanceHidden">
                        <span class="balance">{{wallet.balance | sunToUnit}}</span>
                        <span class="display-unit">TRX</span>
                    </div>
                    <div class="hide-balance" *ngIf="wallet.balanceHidden">
                        [{{'Wallet.Index.HideBalance' | translate}}]
                    </div>
                </div>

                <div id="header-alt-balance" [longPress]="2000" (onRelease)="toggleBalance()">
                    <!-- Tap and hold to show -->
                    <div class="hide-balance-notify" *ngIf="wallet.balanceHidden">
                        {{'Wallet.Index.HideBalanceNotify' | translate}}
                    </div>
                    <div class="currency" *ngIf="!wallet.balanceHidden">
                        <span class="symbol"></span>
                        <span class="amount">{{ wallet.balance | sunToFiat }}</span>
                        <span class="code">{{ config.get('wallet.settings.alternativeIsoCode') }}</span>
                    </div>
                </div>

                <div id="actions" fxLayout="row">
                    <button mat-button="" class="tron-button red-bg" (click)="transferModal()">
                        {{'Wallet.Index.Send' | translate}}
                    </button>
                    <button mat-button="" class="tron-button red-bg" (click)="receiveModal()">
                        {{'Wallet.Index.Receive' | translate}}
                    </button>
                    <button mat-button="" class="tron-button red-bg" (click)="freezeModal()">
                        {{'Wallet.Index.Freeze' | translate}}
                    </button>
                </div>
            </div>

            <!-- Transactions -->
            <div id="wallet-detail-transaction" class="ps" [perfectScrollbar]="{}" (scroll)="onScroll($event)">
                <div infiniteScroll=""
                     [infiniteScrollDistance]="2"
                     [infiniteScrollThrottle]="100"
                     infiniteScrollContainer=".ps"
                     [infiniteScrollDisabled]="false"
                     [fromRoot]="true"
                     (scrolled)="onScrollDown()">

                    <!-- Loading transactions -->
                    <ng-container *ngIf="isLoading">
                        <mat-spinner class="loading-transaction" [diameter]="48" [strokeWidth]="2"></mat-spinner>
                    </ng-container>

                    <ng-container *ngIf="!isLoading">
                        <div class="no-transaction" *ngIf="transactions.length == 0">
                            {{'Wallet.Index.EmptyTransaction' | translate}}
                        </div>
                        <mat-accordion *ngIf="transactions.length > 0" class="transaction-list">
                            <mat-expansion-panel class="transaction-list-item" *ngFor="let tx of transactions">
                                <mat-expansion-panel-header [collapsedHeight]="'60px'" [expandedHeight]="'60px'">
                                    <div fxLayout="row" fxLayoutAlign="start center" style="width: 100%;">
                                        <div fxFlex="5" class="date">
                                            <div class="date-month">{{ tx.timestamp / 1000 | amFromUnix | amDateFormat:'MMM' }}</div>
                                            <div class="date-day">{{ tx.timestamp / 1000 | amFromUnix | amDateFormat:'DD' }}</div>
                                        </div>
                                        <div fxFlex="7" class="icon">
                                            <ng-container [ngSwitch]="tx['contractType']">
                                                <mat-icon *ngSwitchCase="1" svgIcon="trx-send"></mat-icon>
                                                <mat-icon *ngSwitchCase="2" svgIcon="trx-receive"></mat-icon>
                                                <mat-icon *ngSwitchCase="4" svgIcon="trx-vote"></mat-icon>
                                                <mat-icon *ngSwitchCase="11" svgIcon="trx-freeze"></mat-icon>
                                                <mat-icon *ngSwitchCase="12" svgIcon="trx-unfreeze"></mat-icon>
                                                <mat-icon *ngSwitchCase="30" svgIcon="trx-contract"></mat-icon>
                                                <mat-icon *ngSwitchCase="31" svgIcon="trx-contract"></mat-icon>
                                                <mat-icon *ngSwitchCase="44" svgIcon="trx-exchange"></mat-icon>
                                            </ng-container>
                                        </div>
                                        <div fxFlex="30" class="tx-type">
                                            <div [ngSwitch]="tx['contractType']">
                                                <div class="tx-status transfer-tx" *ngSwitchCase="1">
                                                    {{'Wallet.Index.ContractType.Sent' | translate}}
                                                </div>
                                                <div class="tx-status create-tx" *ngSwitchCase="2">
                                                    {{'Wallet.Index.ContractType.Received' | translate}}
                                                </div>
                                                <div class="tx-status vote-tx" *ngSwitchCase="4">
                                                    {{'Wallet.Index.ContractType.Vote' | translate}}
                                                </div>
                                                <div class="tx-status freeze-tx" *ngSwitchCase="11">
                                                    {{'Wallet.Index.ContractType.Freeze' | translate}}
                                                </div>
                                                <div class="tx-status unfreeze-tx" *ngSwitchCase="12">
                                                    {{'Wallet.Index.ContractType.Unfreeze' | translate}}
                                                </div>
                                                <div class="tx-status contract-tx" *ngSwitchCase="30">
                                                    {{'Wallet.Index.ContractType.SmartContract' | translate}}
                                                </div>

                                                <div class="tx-status exchange-tx" *ngSwitchCase="44">
                                                    {{'Wallet.Index.ContractType.Exchange' | translate}}
                                                </div>
                                            </div>
                                        </div>
                                        <span fxFlex=""></span>
                                        <div class="tx-price">
                                            <!-- Get price from different types -->
                                            <ng-container [ngSwitch]="tx.contractType">
                                                <span class="amount" *ngSwitchCase="1">{{ tx['contractData']['amount'] / 1e6 }}</span>
                                                <span class="amount" *ngSwitchCase="44">{{ tx['contractData']['quant'] / 1e6 }}</span>
                                                <span class="amount" *ngSwitchCase="4">{{ tx['contractData']['votes'][0]['vote_count'] }}</span>
                                                <span class="amount" *ngSwitchCase="11">{{ tx['contractData']['frozen_balance'] / 1e6 }}</span>
                                                <span class="amount" *ngSwitchCase="12">~</span>
                                                <span class="amount" *ngSwitchCase="31">~</span>
                                                <span class="amount" *ngSwitchDefault>{{ tx['contractData']['amount'] }}</span>
                                            </ng-container>
                                            <!-- Get contact code -->
                                            <span class="unit" *ngIf="tx['contractData'] && tx.contractType == 4">TP</span>
                                            <span class="unit" *ngIf="tx['contractData'] && ![4, 12, 31].includes(tx.contractType)">
                                                {{tx['contractData']['asset_name'] || 'TRX'}}
                                            </span>
                                        </div>
                                    </div>
                                </mat-expansion-panel-header>

                                <div class="transaction-item-detail" fxLayout="row wrap" fxLayoutAlign="start center">
                                    <div fxFlex="33" class="tx-details__item">
                                        <div class="title">{{'Wallet.Index.Status' | translate}}</div>
                                        <div class="content">
                                            <span *ngIf="tx.confirmed">{{'Wallet.Index.Confirmed' | translate}}</span>
                                            <span *ngIf="!tx.confirmed">{{'Wallet.Index.Unconfirmed' | translate}}</span>
                                        </div>
                                    </div>
                                    <div fxFlex="33" class="tx-details__item">
                                        <div class="title">{{'Wallet.Index.Hash' | translate}}</div>
                                        <div class="content link">
                                            <span (click)="openExternalLink(tx.hash, 'transaction')">{{tx.hash}}</span>
                                        </div>
                                    </div>
                                    <div fxFlex="33" class="tx-details__item" *ngIf="tx.contractType == 1">
                                        <div class="title">{{'Wallet.Index.Now' | translate}}</div>
                                        <div class="content">
                                            <span>{{tx['contractData']['amount'] | sunToFiat: true }}</span>
                                        </div>
                                    </div>
                                    <div fxFlex="33" class="tx-details__item">
                                        <div class="title">{{'Wallet.Index.Time' | translate}}</div>
                                        <div class="content">
                                            <span>{{tx.timestamp / 1000 | amFromUnix | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}}</span>
                                        </div>
                                    </div>

                                    <div fxFlex="33" class="tx-details__item">
                                        <div class="title">{{'Wallet.Index.From' | translate}}</div>
                                        <div class="content" [copy-to-clipboard]="tx.ownerAddress">
                                            <span *ngIf="(addressbook && tx.ownerAddress && addressbook[tx.ownerAddress])">
                                                {{addressbook[tx.ownerAddress].name}}
                                            </span>
                                            <span *ngIf="(addressbook && tx.ownerAddress && !addressbook[tx.ownerAddress])">
                                                {{tx.ownerAddress}}
                                            </span>
                                        </div>
                                    </div>

                                    <div fxFlex="33" class="tx-details__item" *ngIf="tx.toAddress">
                                        <div class="title">{{'Wallet.Index.To' | translate}}</div>
                                        <div class="content" [copy-to-clipboard]="tx.toAddress">
                                            <span *ngIf="(addressbook && tx.toAddress && addressbook[tx.toAddress])">
                                                {{addressbook[tx.toAddress].name}}
                                            </span>
                                            <span *ngIf="(addressbook && tx.toAddress && !addressbook[tx.toAddress])">
                                                {{tx.toAddress}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </mat-expansion-panel>
                        </mat-accordion>
                    </ng-container>
                </div>
            </div>
        </ng-container>
    </div>
</div>
